<template>
  <header class="hm-header">
    <img
      accesskey="q"
      class="left"
      v-if="isShowBack"
      src="@/assets/black.svg"
      @click="$emit('leftClick')"
    />
    <slot name="center">
      <span class="title">{{ title }}</span>
    </slot>
    <div class="right">
      <slot name="right"></slot>
    </div>
  </header>
</template>

<script>
export default {
  name: "HmHeader",
  props: {
    isShowBack: {
      type: Boolean,
      default: true,
    },
    title: {
      type: String,
      default: "我是标题",
    },
  },
  methods: {},
};
</script>

<style lang="less" scoped>
.hm-header {
  position: relative;
  background-color: #fff;
  font-size: (20/3.75vw);
  text-align: center;
  line-height: (60/3.75vw);
  height: (60/3.75vw);
  font-weight: 700;
  color: #000;
  background-color: #fff;
  .title {
    display: block;
    text-align: center;
    font-size: (20/3.75vw);
  }
  .left {
    display: inline-block;
    position: absolute;
    left: (10/3.75vw);
    top: (20/3.75vw);
    width: (20/3.75vw);
    height: (20/3.75vw);
  }
  .right {
    display: inline-block;
    position: absolute;
    right: (10/3.75vw);
    top: 0;
    text-align: right;
  }
}
</style>
